<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    tr,
    th,
    td {
        padding: 20px 30px;
    }
</style>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div class="box">
        <input type="text" placeholder="请输入商品名称" v-model="name">
        <input type="text" placeholder="请输入商品单价" v-model="price">
        <button @click="add">添加</button>
        <br><br>
        <table border="1">
            <thead>
                <tr>
                    <th><input type="checkbox" @click="allCheck"></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in arr" :key="item.id">
                    <td><input type="checkbox" v-model="item.check"></td>
                    <td>{{item.name}}</td>
                    <td>{{item.price | fn('￥')}}</td>
                    <td><button @click="jian(index)">-</button>
                        <span>{{item.num}}</span>
                        <button @click="jia(index)">+</button>
                    </td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <button @click="delCheck">删除选中</button>
        <button @click="clear">清空购物车</button>
        <div>
            <h2>总价￥<span>{{zong}}</span></h2>
        </div>
    </div>

    <script>
        new Vue({
            el: '.box',
            data: {
                all: false,
                name: '',
                price: '',
                arr: [{
                    id: 0,
                    name: '黑猪',
                    price: 250,
                    num: 1,
                    check: false
                }, {
                    id: 1,
                    name: '黑鬼',
                    price: 250,
                    num: 1,
                    check: false
                }, {
                    id: 2,
                    name: '黑色素',
                    price: 250,
                    num: 1,
                    check: false
                },]
            },
            methods: {
                // 删除
                del(index) {
                    this.arr.splice(index, 1)
                },
                // 减数量
                jian(index) {
                    if (this.arr[index].num > 0) {
                        this.arr[index].num--
                    }
                },
                // 加数量
                jia(index) {
                    this.arr[index].num++
                },
                // 全选框
                allCheck() {
                    this.all = !this.all
                    this.arr.forEach(item => {
                        item.check = this.all
                    })
                },
                // 删除选中
                delCheck() {
                    this.arr = this.arr.filter(item => {
                        return !item.check
                    })
                },
                // 清空购物车
                clear() {
                    this.arr = []
                },
                // 添加商品
                add() {
                    this.arr.push({
                        id: this.arr.length,
                        name: this.name,
                        price: parseFloat(this.price),
                        num: 1,
                        check: false
                    })
                    this.name = '';
                    this.price = '';
                }
            },
            computed: {
                // 总价
                zong() {
                    let sum = 0
                    this.arr.forEach(item => {
                        if (item.check) {
                            sum += item.num * item.price
                        }
                    })
                    return sum.toFixed(2)
                }
            },
            filters: {
                // 金额保留两位小数，金额符号
                fn(price, a) {
                    return a + price.toFixed(2)
                }
            }
        })

    </script>
</body>

</html>